<template>
	<view class="home">
		<view class="padding-30 bg-ff bg-shadow radius-40">
			<view class="flex align-center justify-between">
				<view :class="type==0?'delivery_active':'delivery'" @click="choseType(0)">快递配送</view>
				<view :class="type==1?'delivery_active':'delivery'" @click="choseType(1)">现场取货</view>
			</view>
			<!-- 			<view class="text-28 margin-top-35">
				选择一个收货地址 <text class="tyIcon-arrow-right text-24"></text>
			</view>
			<view class="margin-top-30 flex align-center">
				<view class="flex-one">
					<view class="text-cut-one text-32">广东省广州市天河区建设路28号</view>
					<view class="text-28 text-99 margin-top-10">林夕 15878561218</view>
				</view>
				<view class="tyIcon-arrow-right"></view>
			</view> -->
			<view class="" v-if="type==0">
				<view class="text-28 margin-top-35" @click="go('pages/user/address/list?type=2')" v-if="!adres">
					选择一个收货地址 <text class="tyIcon-arrow-right text-24"></text>
				</view>
				<view class="margin-top-30 flex align-center" v-if="adres"
					@click="go('pages/user/address/list?type=2')">
					<view class="flex-one">
						<view class="text-cut-one text-32">{{adres.address}}</view>
						<view class="text-28 text-99 margin-top-10">{{adres.name}} <text
								class="margin-left-10">{{adres.phone}}</text> </view>
					</view>
					<view class="tyIcon-arrow-right"></view>

				</view>
			</view>
		</view>
		<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40 flex align-center">
			<image :src="shop_data.image" mode="" class="shopimg"></image>
			<view class="flex-one margin-left-30">
				<view class="text-cut-two height-80 line-40">{{shop_data.product_name}}</view>
				<view class="margin-top-35 flex align-center">
					<image src="/static/board/money.png" mode="" class="moneyimg"></image>
					<view class="flex-one text-66 text-28 margin-left-10">{{shop_data.price}}</view>
					<ty-text-stepper :value.sync="number" min="1" @change="change">
					</ty-text-stepper>
					<!-- <view class="text-66 text-28">数量：1</view> -->
				</view>
			</view>
		</view>
		<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40">
			<view class="flex align-center" v-if="type==0">
				<view class="flex-one text-28">配送</view>
				<view class="text-28">￥{{shop_data.postage}}</view>
			</view>
			<view class="flex align-center" v-if="type==1">
				<view class="flex-one text-28">下单号码(后4位)</view>
				<view class="text-28">{{men.mobile.slice(men.mobile.length-4)}}</view>
			</view>
			<view class="text-66 text-30 margin-top-20">留言</view>
			<textarea placeholder="非必填"></textarea>
		</view>
		<view class="text-24 margin-top-50 text-66"> <text @click="isAllChoose=!isAllChoose"
				:class="isAllChoose ? 'tyIcon-round-check' : 'tyIcon-round'" class="text-1a padding-right-10"></text>
			已阅 <text @click="go('/pages/game/agreement')" class="text-1a">《服务协议》</text> </view>
		<view class="footerbg">
			<view class="flex align-center padding-top-40 padding-lr-30">
				<view class="text-28">合计：</view>
				<image src="/static/board/money.png" mode="" class="moneyimg"></image>
				<view class="text-28 flex-one margin-left-10">{{money}}</view>
				<view class="paybtn" @click="exchange">确认兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				shop_data: {},
				data: {
					send_type: 0,
					adrid: '',
					goodid: ''
				},
				adres: "",
				adresid: "",
				isAllChoose: false,
				number: 1,
				money: "",
				men:""
			}
		},
		onLoad(a) {
			if ('id' in a) {
				this.data.goodid = a.id
				console.log(this.data.goodid)
			}
			this.init()
		},
		onShow() {
			let globalData = getApp().globalData
			let myAddressId = globalData.order.myAddressId ? globalData.order.myAddressId : ''
			if (myAddressId) {
				this.adresid = myAddressId
				this.rq.getData('address/default_list', {
					id: myAddressId
				}).then(res => {
					if (res.code == 1) {
						this.adres = res.data
					}
				})
			}
			this.rq.getData('Wechat/user_info').then(res => {
				if (res.code == 1) {
					this.men = res.data
				}
			})
		},
		methods: {
			init() {
				this.rq.getData('sign/products_info', {
					id: this.data.goodid
				}).then(res => {
					if (res.code == 1) {
						this.shop_data = res.data
						this.money = res.data.price
					}
				})
			},
			choseType(i) {
				this.type = i
				this.getmoney()
			},
			exchange() {
				this.data.send_type = this.type
				// 地址id
				this.data.adrid = this.adresid
				this.rq.getData('sign/exchange', this.data).then(res => {
					if (res.code == 1) {
						if (res.data.is_pay == 0) {
							this.go('/pages/board/overs')
						} else {
							this.rq.getData('sign/Sign_payment', {
								id: res.data.id
							}).then(res => {
								if (res.data.payment) {
									this.cn.requestPayment({
										appId: res.data.payment.appId,
										nonceStr: res.data.payment.nonceStr,
										package: res.data.payment.package,
										paySign: res.data.payment.paySign,
										signType: res.data.payment.signType,
										timeStamp: res.data.payment.timeStamp,
									}, 1).then(res => {
										this.go('/pages/board/overs')
									}).catch(res => {
										this.go('/pages/board/overs')
									})
								}
							})

						}
					}
				})
			},
			change(e) {
				console.log(e)
				if (e.type == 1) {
					this.number + 1
				} else if (e.type == 2) {
					this.number - 2
				}
				this.getmoney()
			},
			getmoney() {
				// + Number(this.shop_data.postage)
				if (this.type == 0) {
					this.money = (Number(this.number) * Number(this.shop_data.price)) 
				}else{
					this.money = (Number(this.number) * Number(this.shop_data.price))
				}
				console.log(this.number)
				console.log(this.shop_data.price)
				console.log(this.money)
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		height: 100vh;
		background: #fff;
		padding: 20rpx 30rpx;
	}

	.delivery_active {
		width: 300rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.delivery {
		width: 300rpx;
		height: 80rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
		font-size: 24rpx;
		color: #000;
		line-height: 80rpx;
		text-align: center;
	}

	.shopimg {
		width: 168rpx;
		height: 168rpx;
		border-radius: 40rpx;
	}

	.moneyimg {
		width: 24rpx;
		height: 24rpx;
	}

	textarea {
		width: 100%;
		height: 174rpx;
		background: #F3F3F3;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 16rpx 30rpx;
		margin-top: 20rpx;
	}

	.footerbg {
		width: 100%;
		height: 182rpx;
		background: #FFFFFF;
		box-shadow: -8rpx 0rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.paybtn {
		width: 204rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
</style>